<!DOCTYPE html>
<html>

<head>
    <title>使用 JavaScript 在 canvas 上绘制三角形</title>
</head>

<script lang="javascript">
    function draw_triangle(context, x, y, height, width) {
        context.beginPath();
        context.moveTo(x + width / 2, y);
        context.lineTo(x, y + height);
        context.lineTo(x + width, y + height);
        context.lineTo(x + width / 2, y);
        context.stroke();
    }

    function draw() {
        var canvas = document.getElementById("output");
        var context = canvas.getContext("2d");
        draw_triangle(context, 10, 10, 80, 80);
    }
</script>

<style type="text/css">
    canvas {
        border: 1px solid black;
    }
</style>

<body onload="draw()">
    <canvas id="output" height="500" width="500"></canvas>
</body>

</html>